<template>
    <div class="box">
      <div class="header">
         <van-nav-bar title="购物车" @click-left="$router.back()">
            <!-- 左箭头 -->
            <template #left>
              <van-icon name="arrow-left" size="18" color="black"/>
            </template>
            <template #right>
              <van-icon name="delete-o" size="18" color="black" @click="doremoveall"/>
            </template>
         </van-nav-bar>
      </div>
      <div class="main">
        <!-- 后台没有数据过来 -->
        <div class="nothing" v-if="empty">
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="购物车数据为空"
        />
        </div>
        <!-- 后台有数据过来 -->
        <div class="hasthing" v-else>
          <!-- 引入物品的组件 -->
          <van-swipe-cell v-for="(item,index) in cartList" :key="index" :name="item.cartid" :before-close="beforeClose">
            <!-- beforeClose: 包含了一个name属性，这个name属性的执行 就是name属性的值 -->
            <van-checkbox v-model="item.flag" @click="doselectone(item.cartid,item.flag)"></van-checkbox>
            <van-card
              :price="item.originprice"
              :title="item.proname"
              :thumb="item.img1"
            >
            <template #footer>
              <van-stepper v-model="item.num" theme="round" button-size="22" disable-input @change = 'updatenum(item.cartid,item.num)' />
            </template>
            </van-card>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" />
            </template>
          </van-swipe-cell>
          <van-submit-bar :price="priceSum" button-text="提交订单">
            <van-checkbox v-model="isAll"></van-checkbox>
          </van-submit-bar>
        </div>
      </div>
    </div>
  </template>
  
  <script>

import Vue from 'vue';
import { Empty,Card,Stepper,SwipeCell,Checkbox, CheckboxGroup,Dialog,SubmitBar,NavBar} from 'vant';
Vue.use(Empty);
Vue.use(Card);
Vue.use(SubmitBar);
Vue.use(Dialog);
Vue.use(Stepper);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(NavBar);

// 引入接口更新数据的接口doUpdateNum
import { doCartList,doUpdateNum,doDeleteOne,doSeleteAll,doSelectOne,doRemoveAll} from '../api/cart';
  export default {
    name: 'Cart',
    components: {},
    data () {
      return {
        empty:true,
        cartList: [],
      }
    },
    created(){
      // 判断用户是否登陆
      if (localStorage.getItem("token")) {
          this.getCartList()
      } else {
        //  去到登陆页
        this.$router.push("/login")
      }
    },
    methods:{
      updatenum(cartid,num){
        // console.log(cartid,num);
        // 调用增加时数量的接口    调过来的{cartid,num}
        doUpdateNum({cartid,num}).then(res=>{
          console.log(res);
        })
      },
      getCartList(){
       // 发送 获取购物车的请求
        doCartList({userid:localStorage.getItem('userid')}).then((res) => {
          // 判断如果是10020是没有数据，10020后台给的
          if(res.data.code == '10020'){  //没有数据
            console.log(res.data);
            this.empty = true
          }else{   //有数据
            this.empty = false;
            this.cartList = res.data.data;
            // console.log(this.cartList);
          }
        });
      },
      // 异步滑过删除单条数据 刷新才能删除
      beforeClose({name, position, instance }) {
        switch (position) {
          case 'right':
            Dialog.confirm({
              message: '确定删除吗？',
            }).then(() => {
              // 点击了确定删除就在这里执行
              doDeleteOne({cartid:name}).then(res=>{
                // console.log(res);
                // 判断确认删除了就重新调用一次函数渲染到页面
                if(res.data.code == "200"){
                  this.getCartList()
                }
              })
              instance.close();
            }).catch(()=>{
              instance.close();
            })
            break;
        }
      },
      // 单选状态，把cartlist参数传进来
      doselectone(cartid,flag){
        doSelectOne({cartid,flag}).then(res=>{
          console.log(res);
        })
      },
       // 删除当前用户购物车的所有数据
    doremoveall(){
      doRemoveAll({ userid: localStorage.getItem('userid') }).then(res => {
        console.log(res);
        this. getCartList();
      })
    },
    },
    computed:{
      //getter方法决定了 isAll 是上面全部选中 isAll结果就是true，  有一个是false，isAll就是false
      isAll:{
          set(val){
            // console.log(val);
            this.cartList.forEach(item=>item.flag = val);
            // 是否选中更新到数据库中    type这里为是否选中 
            doSeleteAll({userid:localStorage.getItem("userid"),type:val}).then(res=>{
              console.log(res);
            })
          },
          get(){
            return this.cartList.every(item =>item.flag==true)
          }
      },
      priceSum(){
        return this.cartList.reduce((sum,item)=>{
          // 判断true状态的每次相加
          return item.flag? sum + item.num * item.originprice :sum
        },0)*100
      }
    }
  }
  </script>
  <style scoped>
  .delete-button{
    height: 100%;
  }
  /* 内置的控件样式拿不到不能修改，用::v-deep可以解决  */
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: #fff;
}
::v-deep .van-checkbox {
  width: 0.3rem;
}
::v-deep .van-card {
  flex: 1;
  background-color: #fff;
}

  </style>